<template>
  <div id="content">
    <div class="topSearch">
      <p>
        <span
          >商品名称：<el-input
            size="small"
            v-model="params.goodsName"
            style="width: 250px"
          ></el-input
        ></span>
      </p>
      <!-- <p>
        <span
          >类型：<el-input size="small" style="width: 250px"></el-input
        ></span>
      </p> -->
      <p>
        <span
          >时间：
          <el-date-picker
            v-model="selectTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
          >
          </el-date-picker>
        </span>
      </p>
      <p>
        <span
          >分类：<el-cascader
            size="small"
            :props="{
              children: 'bakingList',
            }"
            v-model="bakingIdSelect"
            :options="baking"
          >
          </el-cascader>
        </span>
      </p>
      <p>
        <el-button size="small" type="primary" @click="_search"
          >查 询</el-button
        >
        <el-button
          size="small"
          style="margin-left: 10px; background-color: #303e9d; color: #eeeeee"
          @click="_reset"
          icon="el-icon-refresh"
          >重 置
        </el-button>
        <el-button size="small" type="primary" @click="addGoods(null)"
          >新增商品</el-button
        >
      </p>
    </div>
    <div class="centerTable">
      <el-table
        :data="goodList"
        height="calc(100vh - 250px)"
        border
        stripe
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{
          fontSize: '14px',
          'background-color': '#F3F6FD',
          color: '#333333',
          textAlign: 'center',
        }"
      >
        <el-table-column prop="goodsId" label="商品ID"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="image" label="缩略图">
          <template v-slot:default="scope">
            <el-image
              v-if="scope.row.image"
              :src="'https://' + scope.row.image"
              style="width: 100px; margin-right: 15px"
              :preview-src-list="['https://' + scope.row.image]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="分类"></el-table-column>
        <el-table-column prop="spec" label="规格"></el-table-column>
        <!-- <el-table-column prop="f" label="类型"></el-table-column> -->
        <el-table-column
          prop="goodsPreparationTime"
          label="定制周期(分钟)"
        ></el-table-column>
        <el-table-column prop="price" label="零售价"></el-table-column>
        <el-table-column prop="costPrice" label="成本价"></el-table-column>
        <!-- <el-table-column prop="j" label="销量"></el-table-column> -->
        <!-- <el-table-column prop="k" label="退货数量"></el-table-column> -->
        <!-- <el-table-column prop="l" label="退货占比"></el-table-column> -->
        <el-table-column prop="isSale" label="上下架">
          <template v-slot:default="scope">
            <span v-if="scope.row.isSale === 0">已上架</span>
            <span v-if="scope.row.isSale === 1">已下架</span>
          </template>
        </el-table-column>
        <el-table-column prop="o" label="操作">
          <template v-slot:default="scope">
            <el-link @click="addGoods(scope.row)">编辑</el-link>
            <el-link
              v-if="scope.row.isSale === 1 || scope.row.isSale === null"
              @click="addStoreGood(scope.row)"
              >上架</el-link
            >
            <el-link
              v-if="scope.row.isSale === 0"
              @click="addStoreGood(scope.row)"
              >下架</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px 0"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <dialogGoods ref="dialogGoods" @addStatus="addStatus"></dialogGoods>
    <!-- <el-dialog
      :visible.sync="dialogVisibleGoods"
      width="30%"
      :title="'商品上架'"
    >
      <el-form :model="upGoods" label-width="0">
        <el-form-item prop="goodsId">
          <div style="display: flex">
            <p style="width: 90px; text-align: center; font-weight: bold">
              名称：
            </p>
            <el-select v-model="upGoods.upGoods" multiple placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.shopId"
                :label="item.shopName"
                :value="item.shopId"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog> -->

  </div>
</template>

<script>
import dayjs from 'dayjs'
import dialogGoods from './componentDialog/goodsList/dialogGoods.vue'
export default {
  name: 'goodsList',
  meta: { title: '商品列表', icon: 'el-icon-goods', sort: 3 },
  data() {
    return {
      currentPage: 1,
      totalCount: 0,
      orderData: [
        {
          a: '20202122552AA',
        },
      ],
      goodList: [],
      upGoods: {
        goodsId: null,
        isSale: 0, //0下架 1上架
      },
      baking: [],
      selectTime: '',
      bakingIdSelect: [],
      params: {
        goodsName: '',
        pageSize: 20,
        pageNumber: 1,
        createTime: null,
        endTime: null,
        bakingId: null,
      },
      dialogVisibleGoods: false,
      storeList: [],
    }
  },
  created() {
    this.getGoodList()
    this.getCategoryList()
  },
  components: {
    dialogGoods,
  },
  methods: {
    _search() {
      this.params.pageNumber = 1
      if (this.bakingIdSelect.length) {
        this.params.bakingId = this.bakingIdSelect[1]
      }
      this.getGoodList()
    },
    _reset() {
      this.bakingIdSelect = []
      this.selectTime = ''
      this.params = this.$options.data.call(this).params
      this.getGoodList()
    },
    getCategoryList() {
      this.$api.bakingGetCategoryList().then((res) => {
        console.log('获取商品分类', res)
        const finallyDataList = res
        if (finallyDataList.length) {
          finallyDataList.forEach((item) => {
            item.label = item.categoryName
            item.value = item.categoryId
            if (item.bakingList.length) {
              item.bakingList.forEach((sitem) => {
                sitem.label = sitem.bakingName
                sitem.value = sitem.bakingId
              })
            }
          })
        }
        this.baking = finallyDataList
      })
    },
    changeTime(e) {
      console.log('选择完时间', e)
      this.params.createTime = dayjs(e[0]).format('YYYY-MM-DD')
      this.params.endTime = dayjs(e[1]).format('YYYY-MM-DD')
    },
    addStoreGood(item) {
      console.log('上架item', item)
      this.$confirm(
        `此操作将${item.isSale === 0 ? '下架' : '上架'}该商品, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }
      )
        .then(() => {
          this.$api
            .goodsUpdateIsSale({
              goodsId: item.goodsId,
              isSale: item.isSale === 0 ? 1 : 0,
            })
            .then((res) => {
              console.log('上下架', res)
              if (res) {
                this.$message({
                  type: 'success',
                  message: `${item.isSale === 0 ? '下架' : '上架'}成功!`,
                })
                this.getGoodList()
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    downGood() {},

    addStatus(status) {
      if (status == 1) {
        this.params.pageNumber = 1
        this.getGoodList()
      }
    },
    getGoodList() {
      this.$api.goodsGetPCGoodsList(this.params).then((res) => {
        console.log('商品列表', res)
        this.goodList = res.data
        this.totalCount = res.total
      })
    },
    addGoods(val) {
      console.log('addGoods')
      this.$refs.dialogGoods.handleOpen(val)
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
  },
}
</script>

<style scoped>
.topSearch {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.el-link {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 8px;
}

.el-button {
  background-color: #303e9d;
  border: none;
}
</style>
